<%@ page import="javax.swing.*" %>
<%@ page import="db1.DashboardDAO" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            overflow-x: hidden;
        }
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        #top{
            padding-top: 10px;
            padding-left: 10px;
            width: auto !important;;
            background-color: #0c9146;
            color: aliceblue;
            font-size: 20px;
            vertical-align: middle;
            padding-bottom: 10px;
            padding-left: 20px;
        }
        #ham{
            margin: 3vh auto;
        }

        #menuToggle{
            position:relative;
            top:-1vh;
            left:2vh;
            user-select:none;
        }
        #menuToggle input{
            width:36px;
            height:33px;
            position:absolute;
            top:-5px;
            left:-5px;

            cursor:pointer;
            opacity:0;/* 和display:none;效果一致 隐藏checkbox*/
            z-index:3;
        }
        #menuToggle span{
            display:block;
            width:35px;
            height:5px;
            background-color:#0c9146;
            border-radius:3px;
            margin:5px 0;
            z-index:3;
        }
        #menu a{
            text-decoration:none;
        }
        #menu{
            width:250px;
            height:100vh;
            background-color:#ededed;
            position:absolute;
            padding-top:100px;
            margin:-133px 0 0 -38px;
            list-style-type:none;
            z-index:1;
            opacity:0.9;/*背景色要覆盖，三横杠，没办法先设置透明色用着*/

            transform:translate(-100%,0);/*让菜单栏滑进左侧不可视区域*/
            transition: transform 1s ease;/*设置transform的动画效果目标，秒数，动画方式*/
        }
        #menu li{
            margin:35px 0;
            font-size:22px;
            padding-left:10px;
            color:black;
        }
        #menu li:hover{
            color:tomato;
            transform-origin:0 0;/*变化时的原点定位，及左上角*/
            transform:scale(1.1);/*放大1.1倍*/
        }
        #menuToggle input:checked ~ span{/*被点击后span元素的改变*/
            background-color:tomato;
            transform-origin:0 0;
            transform:scale(0.8);/*缩小三横杠*/
            z-index:2;
        }
        #menuToggle input:checked ~ ul{
            transform-origin:0 0;
            transform: none;/*让在#menu中设置的transform（左移进不可视）消失，重点理解*/
            /*上面两个，第一个对应的是#menu里面的transform 第二个则是是效果消失 */
        }
        #bodies{
            padding-left: 10vh;
            padding-right: 10vh;
        }
        #main{
            padding:10vh 10vh;

        }
        .flexleft{
            display:flex;

        }


    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit-icons.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="top">
    医院排队叫号系统管理面板
</div>
<div id="ham">
    <nav role="navigation">
        <div id="menuToggle">
            <input type="checkbox">
            <span></span>
            <span></span>
            <span></span>
            <ul id="menu">
                <a href="${pageContext.request.contextPath}/admin/index.jsp">
                    <li>管理面板</li>
                </a>
                <a href="${pageContext.request.contextPath}/Main_Patient">
                    <li>患者基础信息管理  </li>
                </a>
                <a href="${pageContext.request.contextPath}/Main_Doctor">
                    <li>医生信息管理 </li>
                </a>
                <a href="${pageContext.request.contextPath}/Main_Doctor">
                    <li>医生排版管理</li>
                </a>
                <a href="${pageContext.request.contextPath}/Main_Office">
                    <li>科室信息管理</li>
                </a>
                <a href="">
                    <li>排队信息管理  </li>
                </a>
            </ul>
        </div>
    </nav>
</div>
<%
    DashboardDAO dashboard=new DashboardDAO();
%>
<div id="bodies">
    <div class="uk-child-width-1-3@s uk-grid-match" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                <h3 class="uk-card-title">总签到人数</h3>
                <p><%=dashboard.getSignNumber()%>人</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                <h3 class="uk-card-title">医生人数</h3>
                <p><%=dashboard.getDoctoreNumber()%>人</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                <h3 class="uk-card-title">管理员人数</h3>
                <p><%=dashboard.getAdminNumber()%>个</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                <h3 class="uk-card-title">安排门诊量</h3>
                <p><%=dashboard.getMZNumber()%>个</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                <h3 class="uk-card-title">今日运营科室</h3>
                <p><%=dashboard.getOfficeNumber()%>个</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                <h3 class="uk-card-title">患者注册人数</h3>
                <p><%=dashboard.getPatientNumber()%>人</p>
            </div>
        </div>
    </div>
</div>
<div class="flexleft">
    <div id="main" style="width: 600px;height:400px;" ></div>
    <div id="main1" style="width: 600px;height:400px;" ></div>
    <div id="main2" style="width: 600px;height:400px;" ></div>
</div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        title: {
            text: '科室就诊人数'
        },
        tooltip: {},
        legend: {
            data: ['就诊人数']
        },
        xAxis: {
            data: ['牙科', '急诊科', '皮肤科', '外科', '内科', '骨科']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [<%=5%>, 20, 36, 10, 10, 20]
            }
        ]
    };

    myChart.setOption(option);
    var myChart1 = echarts.init(document.getElementById('main1'));
    option1 = {
        series: [
            {
                type: 'pie',
                data: [
                    {
                        value: 335,
                        name: '正常报道'
                    },
                    {
                        value: 234,
                        name: '过号报道'
                    },
                    {
                        value: 1548,
                        name: '被挂起'
                    }
                ]
            }
        ]
    };
    myChart1.setOption(option1);
    var myChart2 = echarts.init(document.getElementById('main2'));
    option3 = {
        xAxis: {
            data: ['14日', '15日', '16日', '17日', '18日']
        },
        yAxis: {},
        series: [
            {
                data: [10, 22, 28, 23, 19],
                type: 'line',
                smooth: true
            }
        ]
    };
    myChart2.setOption(option3);
</script>
</body>
</html>